//基于vue指令实现一键的copy
const copy = {
  bind(el, { value }) {
    el.$value = value;
    el.handler = () => {
      if (!el.$value) {
        //当没有值的时候,
        console.log("没有复制的内容");
        return;
      }
      //动态创建textarea标签
      const textarea = document.createElement("textarea");
      textarea.readOnly = "readonly";
      //将textarea设置readonly防止在ios下自动唤起键盘,同时将textarea移除可视区域
      textarea.style.position = "absolute";
      textarea.style.left = "-9999px";
      // 将要copy的值赋给tetxarea标签的value属性
      textarea.value = el.$value;
      document.body.appendChild(textarea);
      textarea.select();
      const result = document.execCommand("Copy");
      if (result) {
        console.log("赋值成功", result);
      }
      document.body.removeChild(textarea);
    };
    //绑定点击事件,一键copy
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener("click", el.handler);
  },
  componentUpdated(el, { value }) {
    el.$value = value;
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener("click", el.handler);
  },
};
//基于用户长按,触发响应的事件

const longpress = {
  bind(el, binding, vnode) {
    if (typeof binding.value !== "function") {
      throw "callback must be a function";
    }
    // 定义一个变量
    let pressTimer = null;
    let start = (e) => {
        console.log('获取的开始的e',e);
      if (e.type === "click" && e.button !== 0) {
        return;
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          handel();
        }, 2000);
      }
    };
    let cancel = (e) => {
        console.log('获取的取消的e',
        e);
      if (pressTimer !== null) {
        clearTimeout(pressTimer);
        pressTimer = null;
      }
    };
    const handel = (e) => {
      binding.value(e);
    };
    //添加事件监听器
    el.addEventListener("mousedown",start);
    el.addEventListener("touchstart", start);
    //移除监听器
    el.addEventListener("click",cancel);
    el.addEventListener("mouseout",cancel);
    el.addEventListener("touchend",cancel);
    el.addEventListener("touchcancel",cancel);
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value;
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener("click", el.handler);
  },
};

//在开发中实现保存按钮的多次点击防抖处理
const debounce={
    inserted(el,binding){
        let timer;
        el.addEventListener('click',()=>{
            if(timer){
                clearTimeout(timer)
            }
            timer=setTimeout(()=>{
                binding.value()
            },1000)
        })
    }
}

const LazyLoad={
    install(Vue,options){
        const defaultSrc=options.default;
        Vue.directive('lazy',{
            bind(el,binding){
                LazyLoad.init(el,binding.value,defaultSrc)
            },
            inserted(el){
                if(IntersectionObserver){
                    LazyLoad.observe(el)
                }else{
                    LazyLoad.listenerScroll(el)
                }
            }
        })
    }
    
}


let obj={
    copy,
    longpress,
    debounce
}
export default {
  install(Vue) {
    Object.keys(obj).forEach((key) => {
        Vue.directive(key, obj[key])
      })
  },
};
